<template>
	<div class="admin-login-container">
		<!-- 添加Canvas背景元素 -->
		<canvas id="interactive-bg"></canvas>
		<div class="login-form-container">
			<div class="login-header">
				<h1>汉中旅游管理系统</h1>
				<p>管理员登录</p>
			</div>

			<el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px" class="login-form"
				@submit.prevent="handleLogin">
				<el-form-item prop="username">
					<el-input v-model="loginForm.account" placeholder="用户名" prefix-icon="el-icon-user"
						:disabled="loading"></el-input>
				</el-form-item>

				<el-form-item prop="password">
					<el-input v-model="loginForm.password" placeholder="密码" type="password" prefix-icon="el-icon-lock"
						:disabled="loading" show-password @keyup.enter.native="handleLogin"></el-input>
				</el-form-item>


				<el-form-item style="margin-bottom: 30px;">
					<el-button type="primary" :loading="loading" @click="handleLogin" class="login-button">
						登 录
					</el-button>
				</el-form-item>

				<div class="login-footer">
					<el-link @click="handleForgotPassword">忘记密码?</el-link>
					<el-divider direction="vertical"></el-divider>
					<el-link @click="handleGoBack">返回首页</el-link>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'AdminLogin',
		data() {
			return {
				loginForm: {
					account: '',
					password: '',
					captcha: ''
				},
				captchaText: '获取验证码',
				loading: false,
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 20,
						message: '长度在 3 到 20 个字符',
						trigger: 'blur'
					}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 20,
						message: '长度在 6 到 20 个字符',
						trigger: 'blur'
					}
					]
				},
				// 新增：背景动画相关变量
				animationId: null,
				particles: [],
				mouse: {
					x: null,
					y: null,
					radius: 150
				}
			}
		},
		mounted() {
			// 新增：初始化背景动画
			this.initBackgroundAnimation();
			// 监听窗口大小变化
			window.addEventListener('resize', this.resizeCanvas);
			// 监听鼠标移动
			document.addEventListener('mousemove', this.handleMouseMove);
			// 监听鼠标离开
			document.addEventListener('mouseleave', this.handleMouseLeave);
		},
		beforeDestroy() {
			// 新增：清理动画
			if (this.animationId) {
				cancelAnimationFrame(this.animationId);
			}
			window.removeEventListener('resize', this.resizeCanvas);
			document.removeEventListener('mousemove', this.handleMouseMove);
			document.removeEventListener('mouseleave', this.handleMouseLeave);
		},
		methods: {
			// 新增：初始化背景动画
			initBackgroundAnimation() {
				const canvas = document.getElementById('interactive-bg');
				const ctx = canvas.getContext('2d');

				// 设置Canvas尺寸
				this.resizeCanvas();

				// 创建粒子
				this.particles = [];
				const particleCount = Math.floor((canvas.width * canvas.height) / 15000);

				for (let i = 0; i < particleCount; i++) {
					this.particles.push({
						x: Math.random() * canvas.width,
						y: Math.random() * canvas.height,
						size: Math.random() * 3 + 1,
						speedX: Math.random() * 0.5 - 0.25,
						speedY: Math.random() * 0.5 - 0.25,
						color: 'rgba(64, 158, 255, 0.8)'
					});
				}

				// 动画循环
				const animate = () => {
					ctx.clearRect(0, 0, canvas.width, canvas.height);

					// 更新粒子位置
					this.particles.forEach(particle => {
						// 鼠标引力
						if (this.mouse.x && this.mouse.y) {
							const dx = this.mouse.x - particle.x;
							const dy = this.mouse.y - particle.y;
							const distance = Math.sqrt(dx * dx + dy * dy);

							if (distance < this.mouse.radius) {
								const force = (this.mouse.radius - distance) / this.mouse.radius;
								particle.speedX += dx * force * 0.01;
								particle.speedY += dy * force * 0.01;
							}
						}

						// 边界检测
						if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
						if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;

						// 更新位置
						particle.x += particle.speedX;
						particle.y += particle.speedY;

						// 绘制粒子
						ctx.beginPath();
						ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
						ctx.fillStyle = particle.color;
						ctx.fill();
					});

					// 绘制连接线
					for (let a = 0; a < this.particles.length; a++) {
						for (let b = a; b < this.particles.length; b++) {
							const dx = this.particles[a].x - this.particles[b].x;
							const dy = this.particles[a].y - this.particles[b].y;
							const distance = Math.sqrt(dx * dx + dy * dy);

							if (distance < 100) {
								const opacity = 1 - distance / 100;
								ctx.beginPath();
								ctx.strokeStyle = `rgba(64, 158, 255, ${opacity})`;
								ctx.lineWidth = 0.5;
								ctx.moveTo(this.particles[a].x, this.particles[a].y);
								ctx.lineTo(this.particles[b].x, this.particles[b].y);
								ctx.stroke();
							}
						}
					}

					this.animationId = requestAnimationFrame(animate);
				};

				animate();
			},
			// 新增：调整Canvas尺寸
			resizeCanvas() {
				const canvas = document.getElementById('interactive-bg');
				const container = document.querySelector('.admin-login-container');
				canvas.width = container.offsetWidth;
				canvas.height = container.offsetHeight;
			},
			// 新增：处理鼠标移动
			handleMouseMove(e) {
				const container = document.querySelector('.admin-login-container');
				const rect = container.getBoundingClientRect();
				this.mouse.x = e.clientX - rect.left;
				this.mouse.y = e.clientY - rect.top;
			},
			// 新增：处理鼠标离开
			handleMouseLeave() {
				this.mouse.x = null;
				this.mouse.y = null;
			},

			getCaptcha() {
				this.captchaText = Math.random().toString(36).substring(2, 6).toUpperCase();
			},
			handleLogin() {
				if (this.loginForm.account.length == 0) {
					this.$message({
						message: '账号不能为空!',
						type: 'warning'
					});
					return;
				}
				if (this.loginForm.password.length == 0) {
					this.$message({
						message: '密码不能为空!',
						type: 'warning'
					});
					return;
				}
				//与后端进行交互
				this.$http.post("adminApi/loginCtl/login", this.loginForm).then((resp) => {
					//根据后端响应回来的结果进行处理resp.data(result对象)
					if (resp.data.code == 200) {
						//前端浏览器中存储用户信息
						sessionStorage.setItem("adminToken", resp.data.data.adminToken);
						sessionStorage.setItem("account", resp.data.data.account);
						sessionStorage.setItem("password", resp.data.data.password);
						this.$router.push("/adminMain");
					} else if (resp.data.code == 201) {
						this.$message({
							message: resp.data.desc,
							type: 'warning'
						});
						return;
					} else {
						this.$message({
							message: resp.data.desc,
							type: 'warning'
						});
						return;
					}
				});
			},
			handleForgotPassword() {
				this.$message({
					message: '忘记密码功能开发中',
					type: 'info'
				});
			},
			handleGoBack() {
				this.$router.push('/');
			}
		}
	}
</script>

<style scoped>
	.admin-login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f0f2f5;
		position: relative;
	}

	/* 新增：Canvas背景样式 */
	#interactive-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.login-form-container {
		width: 100%;
		max-width: 400px;
		background: white;
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		padding: 40px 30px;
		position: relative;
		z-index: 10;
	}

	.login-header {
		text-align: center;
		margin-bottom: 30px;
	}

	.login-header h1 {
		font-size: 28px;
		color: #2c3e50;
		margin-bottom: 10px;
	}

	.login-header p {
		color: #7f8c8d;
		font-size: 16px;
	}

	.login-form {
		margin-top: 20px;
	}

	.el-form-item {
		margin-bottom: 20px;
	}

	.login-button {
		width: 100%;
		height: 48px;
		line-height: 48px;
		font-size: 16px;
	}

	.login-footer {
		display: flex;
		justify-content: center;
		color: #7f8c8d;
		font-size: 14px;
	}

	.el-link {
		color: #7f8c8d;
	}

	.el-link:hover {
		color: #409EFF;
	}
	:root {
  --main-color: #3498db;
  --main-radius: 18px;
  --main-shadow: 0 8px 32px rgba(52,152,219,0.13);
  --main-transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(120deg, #e0f2fe 0%, #b3d8f7 40%, #e6f0fa 100%);
  position: relative;
  overflow: hidden;
}
.login-container::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60vw;
  height: 60vh;
  background: url('https://cdn.jsdelivr.net/gh/ChungZH/static@main/mountain-bg.svg') no-repeat right bottom;
  background-size: contain;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}
.login-card {
  width: 420px;
  background: linear-gradient(120deg, rgba(255,255,255,0.88) 0%, rgba(240,249,255,0.75) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--main-radius);
  box-shadow: var(--main-shadow), 0 0 0 4px rgba(52,152,219,0.08);
  padding: 38px 36px 32px 36px;
  margin: 0 16px;
  transition: var(--main-transition);
  border: none;
  z-index: 2;
  position: relative;
}
.login-card::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #3498db 0%, #6dd5fa 100%);
  opacity: 0.7;
}
.login-card:hover {
  box-shadow: 0 16px 48px rgba(52,152,219,0.18), 0 0 0 8px rgba(52,152,219,0.10);
  transform: translateY(-4px) scale(1.01);
}
.login-header {
  text-align: center;
  margin-bottom: 28px;
}
.login-header h2 {
  margin: 0;
  font-size: 2rem;
  color: #2c3e50;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(52,152,219,0.08);
}
.login-header p {
  margin: 12px 0 0;
  font-size: 1.08rem;
  color: #666;
  letter-spacing: 0.5px;
  background: rgba(240,249,255,0.5);
  border-radius: 10px;
  padding: 4px 0;
}
.login-form {
  margin-top: 24px;
}
.el-input, .el-input__inner {
  border-radius: 12px !important;
  background: rgba(244,250,255,0.95) !important;
  border: 1.5px solid #e0f2fe !important;
  transition: var(--main-transition);
  font-size: 1.08rem;
}
.el-input__inner:focus {
  border: 1.5px solid var(--main-color) !important;
  box-shadow: 0 2px 8px rgba(52,152,219,0.10);
  background: #fff !important;
}
.remember-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background: linear-gradient(90deg, #3498db 0%, #6dd5fa 100%);
  border-radius: 8px;
  border: none;
}
.forgot-password {
  font-size: 15px;
  color: var(--main-color);
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password:hover {
  color: #217dbb;
  text-decoration: underline;
}
.login-button {
  width: 100%;
  padding: 14px 0;
  font-size: 1.15rem;
  margin-top: 18px;
  border-radius: 24px;
  background: linear-gradient(90deg, #3498db 0%, #6dd5fa 100%);
  color: #fff;
  font-weight: bold;
  border: none;
  box-shadow: 0 2px 8px rgba(52,152,219,0.12);
  transition: var(--main-transition);
  position: relative;
  overflow: hidden;
}
.login-button:hover {
  background: linear-gradient(90deg, #6dd5fa 0%, #3498db 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(52,152,219,0.18);
  transform: translateY(-2px) scale(1.03);
}
.login-button::after {
  content: '→';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.2em;
  opacity: 0.5;
  pointer-events: none;
}
.register-link {
  margin-top: 18px;
  text-align: center;
  font-size: 15px;
}
.register-link span {
  color: #666;
}
.register-link .el-link {
  color: var(--main-color);
  font-weight: 500;
  font-size: 15px;
  margin-left: 2px;
  transition: color 0.2s;
}
.register-link .el-link:hover {
  color: #217dbb;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .login-card {
    width: 100%;
    padding: 18px 4vw 18px 4vw;
  }
  .login-header h2 {
    font-size: 1.2rem;
  }
  .login-header p {
    font-size: 0.95rem;
  }
  .login-button {
    font-size: 1rem;
    padding: 12px 0;
  }
}
</style>